<style scoped>
.group_row{margin-bottom: 5px;}
.group_title{width: auto;padding-right: 5px;margin-right: 5px;border-right: 1px solid var(--sm_bg);}
.group_item{margin: 2px;}
.option_list{text-align: left;}
</style>
<template>
  <div class="form_item-additional">
    <input type="hidden" :name="name" :value="value">
    <el-dialog v-model="add_from.show" title="新加购项" draggable width="70%" >
      <forms ref="forms" :config="add_from.config" @submit:forms="group_add"> </forms>
    </el-dialog>

    <div class=""><el-button v-if="!is_info" @click="add_from.show=true" type="primary">添加选项组</el-button></div>
    <list :cols="cols" :data="group">
      <template #tag_list="{row,index}">
        <div class="option_list">
          <el-tag v-for="(v,i2) in row.list" class="group_item" type="primary">{{v.title}}</el-tag>
        </div>
      </template>
      <template #action="{row,index}">
        <el-button v-if="!is_info" @click="group_del(index)" type="danger">删除</el-button>
      </template>
    </list>
  </div>
</template>

<script>
// config 格式：{}
import {ajax} from "@/js/api_tool.js";

export default {
  _title_: '加购项',
  _can_form_param_: true,
  name: "additional",
  props: ['name', 'value', 'config', 'is_info', 'size', 'is_list'],
  emits: ['update:value', 'change'],
  data(){
    return {
      need_display: true,

      add_from: {
        show: false,
        config: {
          title: {label:'组标题',name:'title',type:'text_one',tips:'加购项组标题', validate:["required"]},
          additional_ids: {label:'选项',name:'additional_ids',type:'list_ids',config:'/additional/index',tips:'选择该组的选项(加购项)', validate:["required"]},
          multiple: {label:'是否多选',name:'multiple',type:'radio_switch',config:['否','是'],tips:'',value: 0},
          required: {label:'是否必选',name:'required',type:'radio_switch',config:['否','是'],tips:'',value: 0},
        },
      },
      group: [],

      cols: [
        {name:'title', label:'标题', type:'text_one', width:'200px'},
        {name:'list', label:'选项', type:'tag_list'},
        {name:'multiple', label:'是否多选', type:'radio_switch', width:'80px'},
        {name:'required', label:'是否必选', type:'radio_switch', width:'80px'},
        {name:'action', label:'操作', type:'action', width:'80px'},
      ],
    }
  },
  methods: {
    update_value(){
      let value_arr = [];
      this.group.forEach(row=>{
        value_arr.push({
          title: row.title,
          additional_ids: row.additional_ids,
          multiple: Number(row.multiple),
          required: Number(row.required),
        })
      })
      let v = JSON.stringify(value_arr);

      this.need_display = false;
      setTimeout(()=>{this.need_display = true;},5);
      this.$emit('update:value', v);
      this.$emit('change', v);
    },
    group_add(){
      let data = {
        title: this.add_from.config.title.value,
        additional_ids: this.add_from.config.additional_ids.value,
        multiple: this.add_from.config.multiple.value || 0,
        required: this.add_from.config.required.value || 0,
      };
      this.get_additional(data.additional_ids).then(list=>{
        if (!list.length) return this.$message.error('加购项不能为空！');
        data.list = list;
        this.group.push(data);
        this.add_from.show = false;
        this.$refs.forms.init();
        this.update_value();
      })
    },
    group_del(i){
      this.confirm(`是否确定删除【${this.group[i].title}】组加购项选项`, ()=>{
        this.group.splice(i, 1);
        this.update_value();
      })
    },
    get_additional(ids){
      return new Promise(resolve => {
        if (!ids) return resolve([]);
        ajax({url: '/admin/additional/list', data: {'where[id][in]': ids}, loading: true}, (res)=>{
          resolve(res.data.list);
          return false;
        })
      })
    },
    display(){
      let group = [];
      try {
        if (this.value) group = Object.values(JSON.parse(this.value));
      } catch (e) { }
      let additional_ids = [];
      group.forEach(row=>{
        row.list = [];
        additional_ids = additional_ids.concat(row.additional_ids.split(','));
      })
      this.get_additional(additional_ids.join(',')).then(list=>{
        let map = {};
        list.forEach(v=>{ map[v.id] = v; })
        group.forEach(row=>{
          row.list = [];
          row.additional_ids.split(',').forEach(id=>{
            if (map[id]) row.list.push(map[id]);
          })
        });
        this.group = group;
      })
    },
    display_cols(){
      this.cols.forEach(row=>{
        if (row.name === 'action') {
          row.type = this.is_info ? 'hidden' : 'action';
        }
      })
    },
  },
  watch: {
    value(){
      if (!this.need_display) return;
      this.display();
    },
    is_info(){
      this.display_cols();
    },
  },
  computed: {
  },
  mounted() {
    this.display();
    this.display_cols();
  }
}
</script>